<template>
    <!-- 左侧菜单 -->
    <div class="left-toolbar">
        <!-- <div class="unable-style" v-if="!isAble"></div> -->
        <ul>
            <div v-for="(i, index) in left_iconfont" :key="i.type">
                <div v-if="i.divider" style="height: 1px; width: 100%; background-color: darkgray" />

                <li>
                    <el-tooltip :content="i.tip" placement="right" effect="dark">
                        <div>
                            <el-button :disabled="i.disabled" :class="activeClass == index ? 'btn active' : 'btn'
                                " @click="iconClick(i.type, index)">
                                <i class="iconfont">{{ i.icon }}</i>
                            </el-button>
                        </div>
                    </el-tooltip>
                </li>
            </div>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        isAble: Boolean,
        leftToolFalg: Boolean,
        // optType: Number,
    },
    data: function () {
        return {
            left_iconfont: [
                {
                    icon: "\ue6b6",
                    type: 0,
                    tip: this.$t("message.cadViewer.leftShapeSelect.select"),
                    optType: "0,1,2",
                },
                {
                    icon: "\ue6bd",
                    type: 2,
                    tip: this.$t("message.cadViewer.leftShapeSelect.polyline"),
                    optType: "0,1,2",
                },
                {
                    icon: "\ue6bf",
                    type: 3,
                    tip: this.$t("message.cadViewer.leftShapeSelect.polygon"),
                    optType: "0,1,2",
                },
                {
                    icon: "\ue6bb",
                    type: 4,
                    tip: this.$t("message.cadViewer.leftShapeSelect.rect"),
                    optType: "0,1,2",
                }
            ],
            selectedShapeId: 0,
            activeClass: null,
        };
    },
    watch: {
        leftToolFalg: {
            handler(newName, oldName) {
                this.left_iconfont.forEach((element, index) => {
                    this.$set(this.left_iconfont[index], "disabled", newName);
                });

                if (newName) {
                    this.iconClick(0, 0);
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        iconClick(e, index) {
            //     if (e >= 13) return;
            this.activeClass = index;
            this.selectedShapeId = e;
            this.$emit("handleSelectChange", {
                selectedShapeId: this.selectedShapeId,
            });
        },

        changeShapeId() {
            this.activeClass = 0;
            this.selectedShapeId = 0;
        },

        resetToSelectMode() {
            // this.selectedShapeId = 0;
            this.iconClick(0, 0);
        },
    },
    created() {
        // console.log(this.leftToolFalg)
        this.left_iconfont.forEach((element, index) => {
            this.$set(this.left_iconfont[index], "disabled", this.leftToolFalg);
        });
    },
};
</script>
<style lang="scss" scoped>
.left-toolbar {
    width: 47px;
    height: 100%;
    background: rgba(245, 245, 245, 1);
    border-right: 1px solid #b4b4b4;
    display: flex;
    flex-direction: column;
    align-items: center;

    .unable-style {
        position: absolute;
        width: 47px;
        height: 100%;
        background: rgba(100, 100, 100, 0.5);
    }

    ul {
        margin-top: 12px;
        overflow: hidden;

        li {
            display: flex;
            align-items: center;
            justify-content: center;

            .btn {
                width: 40px !important;
                height: 32px;
                margin: 4px 0;
                display: flex;
                align-items: center;
                justify-content: center;
                background: whitesmoke;
                border: 0 none;
                color: rgb(89, 89, 89);

                .iconfont {
                    font-size: 24px;
                    // cursor: pointer;
                }
            }

            .active {
                display: flex;
                flex-direction: column;
                background: rgba(220, 220, 220, 1);
                border-radius: 4px;
                border: 1px solid rgba(189, 189, 189, 1);
            }
        }
    }
}

::v-deep .el-button.is-disabled {
    color: #c5c8ce !important;
}
</style>